<template>
	<div>儿子组件</div>
	<div>父组件通过prop传递：{{ msg }}{{ name }}</div>
	<div>通过props对象使用：{{ props }}</div>
	<button @click="clickHandle">修改触发v-mode默认事件{{ xxx }}</button>
	<Three />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
	name: "Two",
});
</script>

<script setup>
import Three from "./Three.vue";
import { defineProps, defineEmits, defineExpose, ref, useAttrs } from "vue";

// peop接收
const props = defineProps(["msg", "name", "xxx"]);
// 使用msg
console.log(props.msg);

//自定义事件
const emits = defineEmits(["msgInp", "update:xxx"]);
setTimeout(() => {
	emits("msgInp", "回传修改");
}, 1000);

// v-mode默认绑定事件:
// 接收	const emits = defineEmits(["update:xxx"]);
const clickHandle = () => {
	emits("update:xxx", 666);
};

/* // 全局事件总线下载：
1.npm i mitt
2.创建mybus文件夹，

新建index.js
import mitt from 'mitt';
// mitt调用会返回一个事件总线对象
export default mitt();

*/
// 全局事件总线订阅
import myBus from "../../myBus";
myBus.on("ddd", (data) => {
	console.log("ddd", data);
});

// 子组件需要暴露出去
const sonMsg = ref("子组件数据");
defineExpose({ sonMsg });

// 接收除了prop接收以外的数据,useAttrs接收
const attrs = useAttrs(["a", "b", "c"]);
console.log("attrs", attrs);
</script>
